<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的家乡</title>
    <style>
        /* 基本页面样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 页头样式 */
        header {
            background-color: #f4f4f4;
            padding: 10px 20px;
            text-align: center;
        }

        /* 导航栏样式 */
        nav {
            background-color: #007bff;
            overflow: hidden;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            padding: 14px 20px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
        }

        nav ul li:hover {
            background-color: #0056b3;
        }

        /* 横幅样式 */
        .banner {
            width: 100%;
            height: 300px;
            background: url('banner.jpg') no-repeat center center/cover;
        }

        /* 内容区样式 */
        .content {
            display: flex;
            flex-wrap: wrap;
            margin: 20px;
        }

        .content div {
            flex: 1;
            padding: 10px;
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* 页脚样式 */
        footer {
            text-align: center;
            background-color: #f4f4f4;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- 页头 -->
    <header>
        <h1>我的家乡</h1>
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#intro">家乡简介</a></li>
            <li><a href="#food">特色美食</a></li>
            <li><a href="#scenic">景点介绍</a></li>
            <li><a href="#about">个人简介</a></li>
        </ul>
    </nav>

    <!-- 横幅图片 -->
    <div class="banner"></div>

    <!-- 内容区 -->
    <div class="content">
        <div id="intro">
            <h2>家乡简介</h2>
            <p>这里填写家乡简介内容。</p>
        </div>

        <div id="food">
            <h2>特色美食</h2>
            <p>这里填写特色美食内容。</p>
        </div>

        <div id="scenic">
            <h2>景点介绍</h2>
            <p>这里填写景点介绍内容。</p>
        </div>

        <div id="about">
            <h2>个人简介</h2>
            <p>这里填写个人简介内容。</p>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>© 2024 我的家乡. 版权所有.</p>
    </footer>
</body>
</html>
